<template>
  <div>
    <el-form style="margin-top: 20px" :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        :label="'数据' + index"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"

        :inline="true"
      >
        <el-input style="width: 120px" v-model="domain.value"></el-input>
        <el-input style="width: 120px" v-model="domain.value1"></el-input>
        <el-input style="width: 120px" v-model="domain.value2"></el-input>
        <el-input style="width: 120px" v-model="domain.value3"></el-input>
        <el-input style="width: 120px" v-model="domain.value4"></el-input>
        <el-button @click.prevent="removeDomain(domain)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addDomain">新增数据</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>

    


  </div>

</template>

<script>
export default {
  name: 'table',
  data() {
    return {

      dynamicValidateForm: {
        domains: [{
          value: '',
          value1: '',
          value2: '',
          value3: '',
          value4: '',
        }],
      },
      data:[],
      list:''
    };
  },
  methods: {






    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.dynamicValidateForm.domains.length)
          for (var i=0; i<this.dynamicValidateForm.domains.length; i++){
            this.data.push(this.dynamicValidateForm.domains[i].value)
            this.data.push(this.dynamicValidateForm.domains[i].value1)
            this.data.push(this.dynamicValidateForm.domains[i].value2)
            this.data.push(this.dynamicValidateForm.domains[i].value3)
            this.data.push(this.dynamicValidateForm.domains[i].value4)

          }
          this.list = this.data.join(",")
          console.log(this.list)
        } else {
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    }
  }
}
</script>

<style scoped>

</style>
